<template>
  <div class="content">
    <div class="widths">
      <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router style="height: 800px;">
        <template v-for="(item, index) in store.routetPath" :key="index">
          <el-menu-item :index="item.paths" v-if="!item.hasOwnProperty('children')">
            <span>{{ item.name }}</span>
          </el-menu-item>
          <el-sub-menu :index="'submenu-' + index" v-else-if="item.hasOwnProperty('children')">
            <template #title>{{ item.name }}</template>
            <el-menu-item :index="items.paths" v-for="(items, indexs) in item.children" :key="indexs">{{ items.name
              }}</el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
    <div style="flex: 1;margin-top: 20px;margin-left: 30px;">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, ref, watch, onBeforeUpdate } from 'vue'
import { useRoute } from 'vue-router'
import { useAlertsStore } from '../store/index'
const store = useAlertsStore()
const route = useRoute()
const routetPathView = ref({})
const routePathID = ref('')
onBeforeMount(() => {
  routetPathView.value = store.routetPath
  routePathID.value = route.query.id
  // if (route.query.id === '1') {
  //   store.routetPath = [{ paths: '/home/a', name: '产品列表' }, { paths: '/home/a', name: '产品类型' }]
  // }
})
onBeforeUpdate(() => {
  routePathID.value = route.query.id
})
watch(routePathID, (newQuestion, oldQuestion) => {
  switch (route.query.id) {
    case '1':
      store.routetPath = [{ paths: '/home/everyView/shopList', name: '产品列表' }, { paths: '/home/everyView/shopType', name: '产品类型' }]
      break
    case '2':
      store.routetPath = [{ paths: '/home/everyView/preSales', name: '售前单' }, { paths: '/home/everyView/afterSale', name: '售后单' }]
      break
    case '3':
      store.routetPath = [{ paths: '/home/everyView/marketOutOrder', name: '销售出库订单' }, { paths: '/home/everyView/retrunOrder', name: '退回上家出库单' }, { paths: '/home/everyView/destroyMessageList', name: '销毁信息列表' }, { paths: '/home/everyView/SignFailure', name: '出库/取号失败' }]
      break
    case '4':
      store.routetPath = [{ paths: '/home/a', name: '采购入库', children: [{ paths: '/home/everyView/awaitAudit', name: '采购单待审核' }, { paths: '/home/everyView/awaitPurchase', name: '待采购' }, { paths: '/home/everyView/purchasedButNoGo', name: '已采购-上家未发货' }, { paths: '/home/everyView/awaitQualityTesting', name: '待质检' }, { paths: '/home/everyView/inspectedAwaitDispose', name: '已质检待处理' }, { paths: '/home/everyView/awaiStock', name: '已质检待入库' }, { paths: '/home/everyView/WarehousingSuccess', name: '已入库' }] }, { paths: '/home/a', name: '退货入库', children: [{ paths: '/home/everyView/ReturnToWarehouse', name: '退货待入库' }, { paths: '/home/everyView/goReturnToWarehouse', name: '退货入库' }] }, { paths: '/home/everyView/stallStock', name: '档口入库', children: [{ paths: '/home/everyView/stallStockAwaitGet', name: '待拿货' }, { paths: '/home/everyView/stallStockAwaitSet', name: '待入库' }, { paths: '/home/everyView/stallStockAlready', name: '已入库' }] }]
      break
    case '5':
      store.routetPath = [{ paths: '/home/everyView/awaiCtounted', name: '待盘货' }, { paths: '/home/a', name: '已确认', children: [{ paths: '/home/everyView/acknowledgedCtounted', name: '已确认待审核' }, { paths: '/home/everyView/shiftList', name: '移位列表' }, { paths: '/home/everyView/awaitAuditInentory', name: '移位待审核' }] }]
      break
    case '6':
      store.routetPath = [{ paths: '/home/everyView/warehouseList', name: '仓库列表' }, { paths: '/home/everyView/warehouseType', name: '仓库类型管理' }, { paths: '/home/everyView/warehouseGoodsArea', name: '仓库货区管理' }, { paths: '/home/everyView/warehouseSeat', name: '仓库库位管理' }]
      break
    case '7':
      store.routetPath = [{ paths: '/home/everyView/rookieExpress', name: '淘宝-菜鸟快递' }, { paths: '/home/a', name: '自研-菜鸟快递' }, { paths: '/home/a', name: '快递应用' }]
      break
    case '8':
      store.routetPath = [{ paths: '/home/everyView/basicSetting', name: '基础设置' }, { paths: '/home/everyView/printSetup', name: '打印设置' }, { paths: '/home/a', name: '策略设置' }, { paths: '/home/everyView/userSetting', name: '用户管理' }, { paths: '/home/a', name: '订单类型' }, { paths: '/home/a', name: '耗材费用' }]
      break
    case '9':
      store.routetPath = [{ paths: '/home/everyView/ExportInformation', name: '导出信息' }]
      break
    case '10':
      store.routetPath = [{ paths: '/home/everyView/PurchasingAccountList', name: '采购账号列表' }, { paths: '/home/everyView/PurchasingAccountPlatform', name: '采购账号平台' }, { paths: '/home/everyView/PurchasingAccountType', name: '采购账号状态管理' }, { paths: '/home/everyView/paymentID', name: '支付账号管理' }]
      break
    case '12':
      store.routetPath = [{ paths: '/home/everyView/stallList', name: '档口列表' }]
      break
    case '13':
      store.routetPath = [{ paths: '/home/everyView/afterSaleScan', name: '售后单扫描' }, { paths: '/home/everyView/prePurchasePrint', name: '出库扫描' }]
      break
    case '15':
      store.routetPath = [{ paths: '/home/everyView/MergeLog', name: '合并日志' }]
      break
    default:
      break
  }
})
</script>

<style lang='less' scoped>
// ::v-deep .el-sub-menu .el-sub-menu__icon-arrow {
//   display: none;
// }

.widths {
  width: 185px;
  border: 1px solid #ccc;
  margin-right: 10px;
  border-bottom: none;
}

.content {
  display: flex;
  // justify-content: space-between;
}
</style>
